<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<!-- 分页显示演示开始 -->
<style>
    <!--
    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    .table [valign="top"] {
        vertical-align: top;
    }

    #single div[id^=m] {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        margin: 2px;
        padding: 2px;
        line-height: 25px;
        float: left;
        width: 45%;
        min-height: 225px;
    }

    #mNoGoods {
        max-height: 225px;
        display: block;
        overflow-y: auto;
    }

    #single div[id^=m] span {
        float: left;
    }

    .title {
        width: 60px;
        margin-left: 20px;
    }

    #memo {
        width: 99%;
    }

    tr td:FIRST-CHILD {
        text-align: right;
    }

    #goodsQr {
        min-height: 40px;
        width: 80%;
    }

    #qrCodeList {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        min-height: 400px;
        margin: 2px;
        padding: 15px;
        max-height: 600px;
        overflow-y: auto;
    }

    div[name=box] {
        border: 1px solid;
        color: blue;
        padding: 15px;
        border-radius: 4px 4px 4px 4px;
    }

    -->
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a deny="not" class="nFocus" href="#step" data-toggle="tab">
            <i class="icon-tags"></i>
            入库管理
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="step">
        <form id="inputForm" class="form-inline" action="${ctx}/adoms/goods/inStock" method="post">
            <table id="step1" style="width: 80%; margin: auto;"
                   class="table table-striped table-bordered table-condensed">
                <tr>
                    <td class="span2">入库单编号:</td>
                    <td>
                        <input readonly="readonly" type="text" id="batchCode" name="batchCode">
                    </td>
                </tr>
                <tr>
                    <td class="span2">请选择商品:</td>
                    <td>
                        <select id="marchandise" name="marchandise.id" style="width: auto;">
                            <c:forEach items="${mList }" var="m" varStatus="index">
                                <option value="${m.id }">${index.index + 1}.${m.name }</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">商品详情:</td>
                    <td>
                        <c:forEach items="${mList }" var="m" varStatus="index">
                            <div class="hide" id="m${m.id }">
                                <table class="table-bordered" style="width: 100%; background-color: #FFFFFF;">
                                    <tr>
                                        <td class="span2">商品名称：</td>
                                        <td>${index.index + 1}. ${m.name }</td>
                                    </tr>
                                    <tr>
                                        <td>商品编号：</td>
                                        <td>${m.code }</td>
                                    </tr>
                                    <tr>
                                        <td>单价：</td>
                                        <td>
											<span class="tBlue">
												<span>${m.price }</span>
												元
											</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>商品条码：</td>
                                        <td>${m.barCode }</td>
                                    </tr>
                                    <tr>
                                        <td>品牌：</td>
                                        <td>${m.brand.name }</td>
                                    </tr>
                                    <tr>
                                        <td>产地：</td>
                                        <td>${m.producePlace }</td>
                                    </tr>
                                    <tr>
                                        <td>保质期：</td>
                                        <td>${m.shelflife }月</td>
                                    </tr>
                                    <tr>
                                        <td>商品描述：</td>
                                        <td>${m.description }</td>
                                    </tr>
                                    <tr>
                                        <td>规格：</td>
                                        <td name="spcification">${m.spcification }</td>
                                    </tr>
                                    <tr>
                                        <td>包装：</td>
                                        <td id="mPackageing" to="#inputPackage">${m.packageing }</td>
                                    </tr>
                                    <tr>
                                        <td>每件数量：</td>
                                        <td>
                                                ${m.numOfBox } ${m.packageing }
                                            <input type="hidden" name="mNumOfBox" value="${m.numOfBox }"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </c:forEach>
                    </td>
                </tr>
                <tr>
                    <td>所属部门:</td>
                    <td>
                        <select id="department" name="department.id">
                            <option value="${USER.department.id}">${USER.department.name}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>生产日期:</td>
                    <td>
                        <input id="produceDate" readonly="readonly" style="background-color: #FFFFFF; cursor: auto;"
                               datepicker="datepicker" name="produceDate" type="text" size="30" maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td>录入数量:</td>
                    <td>
                        <input id="numOfBox" unit="#unit" type="text" name="numOfBox" value="0">
                        <select id="unit" style="width: auto;">
                            <option id="inputPackage"></option>
                            <option>件</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;" colspan="2">
                        <input class="btn btn-primary" type="button" id="step1Cance" value="取 消"/>
                        <input class="btn btn-primary" type="button" id="step1Next" value="下一步"/>
                    </td>
                </tr>
            </table>
            <table id="step2" style="width: 80%; margin: auto;"
                   class="table hide table-striped table-bordered table-condensed">
                <tr>
                    <td colspan="2" style="font-size: 18px; color: blue; margin: 5px 10px;">
						<span style="float: left;">
							扫描二维码
							<span style="font-size: 12px;">
								( 录入总数
								<span id="countNumberT" class="tRed">10</span>
								<span id="countUnitT" class="tRed">件</span>
								) - 规格 -
								<span id="spcification_S"></span>
							</span>
							：
						</span>
                        还剩
                        <span id="countNumber" class="tRed">10</span>
                        <span id="countUnit" class="tRed">件</span>
                        需录入
                    </td>
                </tr>
                <tr>
                    <td class="span2">商品二维码:</td>
                    <td>
                        <input name="goodsQr" id="goodsQr" class="span6" type="text" maxlength="50"/>
                        <input class="btn btn-primary" type="button" id="clearInputCode" value="清空"/>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        待入库 二维码 列表:
                        <br/>

                        <div id="completeMessage">
                            已录入数量
                            <span id="counter" class="tBlue">0</span>
                            <span to="#mPackageing"></span>
                        </div>
                    </td>
                    <td>
                        <div id="qrCodeList"></div>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;" colspan="2">
                        <input class="btn btn-primary" type="button" id="step2Previous" value="上一步"/>
                        <input class="btn btn-primary" type="button" id="step2Clear" value="重新录入"/>
                        <input class="btn btn-primary" type="button" id="step2Next" value="下一步"/>
                    </td>
                </tr>
            </table>
            <table id="step3" style="width: 80%; margin: auto;"
                   class="table hide table-striped table-bordered table-condensed">
                <tr>
                    <td align="center" style="text-align: center;">
                        <h3>录入完成</h3>
                    </td>
                </tr>
                <tr>
                    <td id="finishedMessageBox"
                        style="text-align: center; padding: 30px; font-size: 18px; color: blue; margin: 5px 10px;">
                        已成功入库XXXXXX商品，一共XXXX，生产日期是XXXXXX
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <a href="${ctx }/adoms/goods/storage" class="btn btn-primary" id="step3Done">完成</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
function init() {
    var d = new Date();
    var code = "B" + d.getTime();
    $("#batchCode").val(code);
}
$(function () {
    init();
    $("#inputForm").validate({
        rules: {
            "marchandise.id": "required",
            "department.id": "required",
            "produceDate": "required",
            "numOfBox": {
                required: true,
                digits: true
            }
        }
    });
    //清空输入框中的二维码
    $("#clearInputCode").click(function () {
        $("#goodsQr").val("");
    });
    $("#inputForm").submit(function () {
        return false;
    });
    $("#marchandise").change(function () {
        $("div[id^=m]:not([id^=mG])").hide();
        var mid = $(this).val();
        $("#m" + mid).show();
        $("#inputPackage").html($("[to=#inputPackage]", $("#m" + mid)).html());
    }).change();
    //第一步，点击下一步
    $("#step1Next").click(function () {
        $("#inputForm").submit();
        if ($('#inputForm').validate().valid()) {
            if ($("#numOfBox").val() > 0) {
                $("#step1").hide();
                $("#step2").show();
                $("#countNumber").html($("#numOfBox").val());
                $("#countUnit").html($("#unit").val());
                $("#spcification_S").html($("td[name=spcification]", $("#m" + $("#marchandise").val())).html());
                $("#countNumberT").html($("#numOfBox").val());
                $("#countUnitT").html($("#unit").val());
                $("span[to=#mPackageing]").html($("#mPackageing").html());
                $("#counter").html(0);
                $("#qrCodeList").html("");
            } else {
                msgAlert.show("录入数量必须大于0");
            }
        } else {
        }
    });
    $("#step2Next").click(
            function () {
                if (parseInt($("#countNumber").html()) > 0) {
                    msgAlert.show("录入未完成！");
                    return false;
                }
                $(this).attr("disabled", "disabled");
                var c = $("#inputForm").serialize();
                $.post("${ctx }/adoms/goods/storage", c, function (result) {
                    if (result) {
                        $("#step2").hide();
                        $("#step3").show();
                        $("#finishedMessageBox").html(
                                "已成功入库" + $("#marchandise option:selected").text() + "商品，一共" + $("#counter").html() + $("[to=#mPackageing]").html() + "，生产日期是" + $("#produceDate").val());
                    } else {
                        msgAlert.show("操作异常，请联系管理员！");
                    }
                }, 'json');
            });
    $("#step2Previous").click(function () {
        $("#step2").hide();
        $("#step1").show();
    });
    //全部清险滩
    $("#step2Clear").click(function () {
        $("#qrCodeList").empty();
        $("#step1Next").click();
        $("#counter").html("0");
    });
    $("#goodsQr").on("keyup", function (e) {
        var _self = $(this);
        var keyCode = e.keyCode;
        if (!keyCode || keyCode == 13) {
            var val = $.trim($(this).val());
            $("[name=box]").each(function () {
                var q = $(this).attr("value");
                if (q == val) {
                    msgAlert.show("二维码：" + val + "重复！");
                    $("#goodsQr").val("").focus();
                    _self.val("");
                    val = "";
                    return false;
                }
            });
            if ($("#countNumber").html() == "0") {
                msgAlert.show("数量已经录入完成，请点击下一步保存数据！");
                return false;
            }
            if (val) {
                $.post("${ctx}/adoms/qrGoodsCode/getGoodsOrBoxByCode", {
                    qrCode: val
                }, function (map) {
                    var flag = "<span style='color:red;'>" + val + " - 无效</span>";
                    if (map) {
                        var box = $("<div name='box' value='" + val + "'><span class='close' name='boxRemove'>x</span></div>");
                        if (map.box) { //显示箱码中的货物
                            //判断件数中的盒数是否与现在商品的规格一致
                            var mNum = $("[name=mNumOfBox]", $("#m" + $("#marchandise").val())).val();
                            if (map.gList.length != mNum) {
                                msgAlert.show("箱码中货物数量与入库商品的规格不符！");
                                return false;
                            }
                            if ($("#countUnit").html() != "件") {
                                if (map.gList.length > parseInt($("#countNumber").html())) {
                                    msgAlert.show("本件数量超过录入数量，请单个录入！");
                                    return false;
                                }
                            }
                            //列出本箱中未入库的货物
                            var len = 0;
                            $.each(map.gList, function (i, item) {
                                var isRepeat = false;
                                $("input[name=qrid]").each(function () {
                                    var value = $(this).val();
                                    if (value == item.id) {
                                        isRepeat = true;
                                    }
                                });
                                if (isRepeat) {
                                    $(box).append(i + ".流水码" + " - " + item.wCode + " - " + item.state + " - 该二维码已被使用，故此作废<br/>");
                                } else {
                                    var counter = parseInt($("#counter").html()) + 1;
                                    $(box).append(i + ".流水码" + " - " + item.wCode + "<input type='hidden' name='qrid' value='" + item.id + "'/> - " + item.state + "<br/>");
                                    $("#counter").html(counter);
                                    len++;
                                }
                            });
                            $(box).prepend("箱码:" + map.box.wCode + " - 有效数量:" + len + "<input type='hidden' name='boxid' value='" + map.box.id + "'/> - " + map.box.state + " <br/>");
                            //计算还剩多少数量
                            if ($("#countUnit").html() == "件") {
                                var n = parseInt($("#countNumber").html()) - 1;
                                $("#countNumber").html(n);
                            } else {
                                var n = parseInt($("#countNumber").html()) - len;
                                $("#countNumber").html(n);
                            }
                            //删除功能
                            $("[name=boxRemove]", box).click(function () {
                                box.remove();
                                var counter = parseInt($("#counter").html()) - len;
                                $("#counter").html(counter);
                                //计算还剩多少数量
                                if ($("#countUnit").html() == "件") {
                                    var n = parseInt($("#countNumber").html()) + 1;
                                    $("#countNumber").html(n);
                                } else {
                                    var n = parseInt($("#countNumber").html()) + len;
                                    $("#countNumber").html(n);
                                }
                            });
                        } else { //显示只按货物二维码扫描的货物
                            if ($("#countUnit").html() == "件") {
                                msgAlert.show("当前是以件为单位录入，请按件扫描货物！");
                                return false;
                            }
                            var goods = map.goods;
                            if (goods) {
                                var isRepeat = false;
                                $("input[name=qrid]").each(function () {
                                    var value = $(this).val();
                                    if (value == goods.id) {
                                        isRepeat = true;
                                    }
                                });
                                if (isRepeat) {
                                    flag = "流水码." + goods.wCode + " - " + goods.state + " - 该二维码已被使用，故此作废<br/>";
                                } else {
                                    var counter = parseInt($("#counter").html()) + 1;
                                    flag = "流水码." + goods.wCode + "<input type='hidden' name='qrid' value='" + goods.id + "'/> - " + goods.state + "<br/>";
                                    $("#counter").html(counter);
                                    $("[name=boxRemove]", box).click(function () {
                                        box.remove();
                                        var counter = parseInt($("#counter").html()) - 1;
                                        $("#counter").html(counter);
                                        //计算还剩多少数量
                                        if ($("#countUnit").html() == "件") {
                                            var n = parseInt($("#countNumber").html()) + 1;
                                            $("#countNumber").html(n);
                                        } else {
                                            var n = parseInt($("#countNumber").html()) + 1;
                                            $("#countNumber").html(n);
                                        }
                                    });
                                    //计算还剩多少数量
                                    if ($("#countUnit").html() != "件") {
                                        var n = parseInt($("#countNumber").html()) - 1;
                                        $("#countNumber").html(n);
                                    }
                                }
                                $(box).append(flag);
                            }
                        }
                        $("#qrCodeList").prepend(box);
                        flag = "";
                    }
                    if (flag != "") {
                        $("#qrCodeList").prepend(flag + "<br/>");
                    }
                    $("#goodsQr").val("").focus();
                }, "json");
            }
        }
    });
});
</script>
<c:if test="${msg != null}">
    <script>
        $(function () {
            msgAlert.show("${msg}");
        });
    </script>
</c:if>
<!-- 
var c = $("#inputForm").serialize();
alert(c);
 --></body>
</html>